<template>
	<view class="container">
		<view class="main-component">
			<view v-for="(item,index) in dragList" :key="index">
				<base-component :record="item"></base-component>
			</view>
		</view>
		<uni-card class="bind-card">
			<uni-row class="demo-uni-row" :gutter="8" style="padding-bottom: 20rpx;">
				<uni-col style="margin-top: 16rpx;">
					<uni-col>
						<text style="font-size:1.2rem; color: #E37078;">￥107</text>
					</uni-col>
					<uni-col>
						<text style="font-size:.8rem; color: #5a5959;">雪非雪青果维雪青果维雪青果维雪青果维雪青果维雪青果维蔬嫩肤护理服务</text>
					</uni-col>
					<uni-col>
						<text style="font-size:.8rem; color: #5a5959;">护理时长：50分钟</text>
					</uni-col>
					
				</uni-col>
			</uni-row>
		</uni-card>
		<view class="main-component">
			<view v-for="(item,index) in dragList" :key="index">
				<base-component :record="item"></base-component>
			</view>
		</view>
		<view class="tui-operation">
			<tui-button :size="28" type="danger" width="220rpx" height="70rpx" shape="circle" style="margin-right: 1rem;margin-left: auto;"
			 @tap="toOrder()">确认下单</tui-button>
		</view>
	</view>
</template>

<script>
	import baseComponent from '@/components/baseComponent/baseComponent'
	import tuiButton from "@/components/button/button"
	export default {
		data() {
			return {
				dragList: [
					{
					  "options": {
					    "fileList": [
					      {
					        "url": "https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/20210421/f54723dd-81c7-41fb-93f0-6574daceb220/a.png"
					      }
					    ],
					    "hotZoneList": []
					  },
					  "label": "热区",
					  "type": "hotZone",
					  "key": "hotZone_1618989025361"
					}
				]
			}
		},
		components: {
			baseComponent,
			tuiButton
		},
		methods:{
			toOrder() {
				uni.navigateTo({
					url:'/packageG/pages/order/order'
				})
			}
		}
	}
</script>

<style>
	.bind-card{
		margin: 24rpx 0;
	}
	image{
		width: 100%;
	}
	.clamp {
		/* #ifdef APP-PLUS-NVUE */
		lines: 1;
		/* #endif */
		/* #ifndef APP-PLUS-NVUE */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
		/* #endif */
	}
	.tui-operation {
		width: 100%;
		height: 100rpx;
		/* box-sizing: border-box; */
		background: rgba(255, 255, 255, 0.98);
		position: fixed;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		z-index: 10;
		bottom: 0;
		left: 0;
	}
</style>
